<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人资料</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
	</head>
	<body>
		<div style="width: 67.5rem;height: auto;" class="divColumn" id="content">
			<div style="width: 100%;height: 40rem;border: 0.0625rem solid #f0f0f0;" class="divColumn">
				<div style="width: 100%;height: 2.5rem;background: #F5F8FA;;color: black;font-weight: 600;" class="divColumnCenter">
					<span style="margin-left: 1.25rem;">个人资料</span>
				</div>

				<div style="margin-top: 1.25rem;width: 31.25rem;">
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="当前头像" prop="name">
							<img src="img/test1.jpg" style="width: 5rem;height: 5rem;" />
						</el-form-item>
						<el-form-item label="昵称:" required>
							<el-input v-model="ruleForm.nickName"></el-input>
						</el-form-item>
						<el-form-item label="真实姓名:">
							<el-input v-model="ruleForm.name"></el-input>
						</el-form-item>
						<el-form-item label="性别:">
							<el-radio-group v-model="ruleForm.resource">
								<el-radio label="男"></el-radio>
								<el-radio label="女"></el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item prop="date1" label="生日:">
							<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
						</el-form-item>
						<el-form-item label="居住地:">
							<el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="onSubmit">保存</el-button>
						</el-form-item>
					</el-form>

				</div>

			</div>

		</div>
		<script src="js/cityData.js"></script>
		<script>
			var content = new Vue({
				el: '#content',
				data: {
					ruleForm: {
						name: '',
						region: '',
						date1: '',
						date2: '',
						delivery: false,
						type: [],
						resource: '',
						nickName: '哈啊哈'
					},
					rules: {

					},
					options: options,
				}

			})
		</script>
	</body>
</html>
